<template>
<div class="app-container">

    <el-tabs v-model="activeTab">
        <el-tab-pane label="商品信息" name="first">
            <el-form ref="goodsFormRef" :model="goodsForm" :rules="goodsFormRule" label-width="8rem" label-position="right">
                <el-form-item label="商品名称" prop="title">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-input v-model="goodsForm.title" placeholder="请输入商品名称"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="商品分类" prop="cate_id">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-cascader v-model="goodsForm.cate_id" :options="cateList" :props="cateProps" placeholder="请选择商品分类" class="full-cascader"></el-cascader>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="商品图片" prop="image">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <upload-picture v-model="goodsForm.image" :limit="1" :width="400" :height="400" />
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="商品轮播图" prop="slider_image">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <upload-files v-model="goodsForm.slider_image" :limit="5" :width="800" :height="800" />
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="商品关键字" prop="keyword">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-input v-model="goodsForm.keyword" placeholder="请输入商品关键字"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="单位" prop="unit_name">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-input v-model="goodsForm.unit_name" placeholder="请输入单位"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="商品简介" prop="intro">
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-input v-model="goodsForm.intro" type="textarea" placeholder="请输入商品简介"></el-input>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="自定义价格" prop="can_update_price" required>
                    <el-radio-group v-model="goodsForm.can_update_price">
                        <el-radio :label="0">否</el-radio>
                        <el-radio :label="1">是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品规格" prop="spec_type" required>
                    <el-radio-group v-model="goodsForm.spec_type">
                        <el-radio :label="0">单规格</el-radio>
                        <el-radio :label="1">多规格</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="goodsForm.spec_type == 0">
                    <el-descriptions direction="vertical" :column="8" border>
                        <el-descriptions-item label="售价">
                            <el-input v-model="specForm.price" placeholder="售价"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="成本价">
                            <el-input v-model="specForm.cost" placeholder="售价"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="原价">
                            <el-input v-model="specForm.ot_price" placeholder="原价"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="库存">
                            <el-input v-model="specForm.stock" placeholder="库存"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="商品编号">
                            <el-input v-model="specForm.bar_code" placeholder="商品编号"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="重量(KG)">
                            <el-input v-model="specForm.weight" placeholder="重量"></el-input>
                        </el-descriptions-item>
                        <el-descriptions-item label="体积(m³)">
                            <el-input v-model="specForm.volume" placeholder="体积"></el-input>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form-item>
                <template v-if="goodsForm.spec_type == 1">
                    <el-form-item label="选择规格">
                        <el-row :gutter="10">
                            <el-col :span="12">
                                <el-select v-model="goodsForm.goods_rule_id" placeholder="请选择规格">
                                    <el-option v-for="item in goodsRuleList" :key="item.id" :label="item.rule_name" :value="item.id"></el-option>
                                </el-select>
                                <el-button type="primary" class="ml8" @click="confirmGoodsRule">确定</el-button>
                                <el-button type="default" class="ml8" @click="showCreateGoodsRule">添加规格模板</el-button>
                            </el-col>
                        </el-row>
                        <div class="goods-rule-box" v-if="goodsRule.length">
                            <div class="goods-rule-list">
                                <div class="goods-rule-item" v-for="(rule,index) in goodsRule" :key="index">
                                    <div class="goods-rule-name">{{rule.value}}</div>
                                    <div class="goods-rule-detail">
                                        <el-tag class="mr8" type="primary" v-for="(item,i) in rule.detail" :key="i">{{item}}</el-tag>
                                    </div>
                                </div>
                            </div>
                            <div class="generate-box">
                                <el-button type="success" @click="generate(1)">立即生成</el-button>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <create-goods-attr :attrData.sync="attrData" :attrFields.sync="attrFields"></create-goods-attr>
                    </el-form-item>
                </template>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="商品详情" name="second">
            <el-form ref="descFormRef" :model="descForm" :rules="descFormRule" label-width="8rem" label-position="top">
                <el-form-item label="商品详情" prop="description">
                    <el-row :gutter="10">
                        <el-col :span="24">
                            <upload-files v-model="descForm.description" :limit="10" placeholder="请上传商品详情图片，最多可上传10张"></upload-files>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="其他设置" name="third">
            <el-form :model="goodsForm" label-width="8rem" label-position="right">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="虚拟销量">
                            <el-input v-model="goodsForm.ficti" placeholder="请输入商品简介"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="额外赠送积分">
                            <el-input v-model="goodsForm.give_integral" placeholder="请输入商品简介"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="排序">
                            <el-input v-model="goodsForm.sort" placeholder="请输入商品简介"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="商品状态">
                            <el-radio-group v-model="goodsForm.is_show">
                                <el-radio :label="1">上架</el-radio>
                                <el-radio :label="0">下架</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="参与赠送">
                            <el-radio-group v-model="goodsForm.is_present">
                                <el-radio :label="1">开启</el-radio>
                                <el-radio :label="0">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="促销单品">
                            <el-radio-group v-model="goodsForm.is_benefit">
                                <el-radio :label="1">开启</el-radio>
                                <el-radio :label="0">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="精品推荐">
                            <el-radio-group v-model="goodsForm.is_best">
                                <el-radio :label="1">开启</el-radio>
                                <el-radio :label="0">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="首发新品">
                            <el-radio-group v-model="goodsForm.is_new">
                                <el-radio :label="1">开启</el-radio>
                                <el-radio :label="0">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="优品推荐">
                            <el-radio-group v-model="goodsForm.is_good">
                                <el-radio :label="1">开启</el-radio>
                                <el-radio :label="0">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-tab-pane>
    </el-tabs>

    <el-button class="submit-btn" type="primary" size="small" @click="submit">保存</el-button>

    <create-goods-rule ref="createGoodsRuleRef" @getList="getGoodsRuleList"></create-goods-rule>
</div>
</template>

<script>
import {
    getGoodsRulePickerApi,
    generateAttrApi,
} from "@/api/product/rule";

import {
    productCreateApi,
    productUpdateApi,
    productReadApi
} from "@/api/product/goods";

import {
    getCategoryTreeApi
} from "@/api/product/category";

import createGoodsRule from '../rule/edit.vue'
import createGoodsAttr from './components/createGoodsAttr'

import uploadFiles from '@/components/upload/files.vue';
import uploadPicture from '@/components/upload/picture.vue';

export default {
    components: {
        createGoodsAttr,
        createGoodsRule,
        uploadFiles,
        uploadPicture
    },
    data() {
        return {
            activeTab: "first",
            cateList: [],
            goodsRuleList: [],
            cateProps: {
                label: 'title',
                value: 'id',
                emitPath: false,
                checkStrictly: false,
                showAllLevels: false,
                multiple: true
            },
            goodsForm: {
                title: "",
                cate_id: [],
                keyword: "",
                image: "",
                slider_image: [],
                unit_name: "",
                intro: "",
                video_link: "",
                spec_type: 1,
                is_show: 0,
                is_hot: 0,
                is_benefit: 0,
                is_best: 0,
                is_new: 0,
                is_good: 0,
                is_present: 0,
                spec: "",
                goods_rule_id: '',
                can_update_price: 1,
            },
            goodsFormRule: {
                title: [{
                    required: true,
                    message: "请输入商品名称",
                    trigger: "blur"
                }],
                cate_id: [{
                    required: true,
                    message: "请选择商品分类",
                    trigger: "change"
                }],
                image: [{
                    required: true,
                    message: "请上传商品图片",
                    trigger: "change"
                }],
                slider_image: [{
                    required: true,
                    message: "请上传商品轮播图",
                    trigger: "change"
                }],
                keyword: [{
                    required: true,
                    message: "请输入商品关键字",
                    trigger: "blur"
                }],
                unit_name: [{
                    required: true,
                    message: "请输入单位",
                    trigger: "blur"
                }],
                intro: [{
                    required: true,
                    message: "请输入商品简介",
                    trigger: "blur"
                }],
                spec_type: [{
                    required: true,
                    message: "请选择规格",
                    trigger: "change"
                }]
            },
            descForm: {
                description: []
            },
            descFormRule: {
                description: [{
                    required: true,
                    message: "请输入商品详情",
                    trigger: "blur"
                }]
            },
            // 单规格表格
            specForm: {
                pic: '',
                price: 0,
                cost: 0,
                ot_price: 0,
                stock: 0,
                bar_code: '',
                weight: 0,
                volume: 0,
                brokerage: 0,
                brokerage_two: 0,
                vip_price: 0
            },
            // 已选规格的规则表
            goodsRule: [],
            // 多规格字段
            attrFields: [],
            // 多规格
            attrData: [],
        }
    },
    created() {
        this.getGoodsRuleList();
        this.getGoodsCateList();
        let id = this.$route.query.id;
        if (id) {
            this.getGoodsDetail();
        }
    },
    methods: {
        getGoodsDetail() {
            productReadApi({
                id: this.$route.query.id
            }).then(res => {
                this.goodsForm = res.data.product;
                this.descForm = res.data.description;
                let attr_result = res.data.attr_result;
                if (this.goodsForm.spec_type == 0) {
                    this.specForm = attr_result.value[0];
                } else {
                    this.attrData = attr_result.value;
                    this.goodsRule = attr_result.attr;
                    let fields = [];
                    this.goodsRule.forEach(ele => {
                        fields.push(ele.value);
                    })
                    this.attrFields = fields;
                }
            })
        },
        getGoodsCateList() {
            getCategoryTreeApi({}).then(res => {
                this.cateList = res.data.tree
            })
        },
        getGoodsRuleList() {
            getGoodsRulePickerApi({}).then(res => {
                this.goodsRuleList = res.data.list
            })
        },
        showCreateGoodsRule() {
            this.$refs['createGoodsRuleRef'].showCreateDrawer();
        },
        confirmGoodsRule() {
            let goodsRuleId = this.goodsForm.goods_rule_id;
            if (goodsRuleId == '') {
                this.$message.error("请选择规格");
                return false;
            }
            let target = this.goodsRuleList.find(ele => ele.id == goodsRuleId);

            if (target) {
                this.goodsRule = target.rule_value;
            }
        },
        // 立即生成
        generate(type) {
            let goodsRuleId = this.goodsForm.goods_rule_id;
            if (goodsRuleId == '') {
                this.$message.error("请选择规格");
                return false;
            }
            let target = this.goodsRuleList.find(ele => ele.id == goodsRuleId);

            generateAttrApi({
                attrs: target.rule_value,
                details: target.rule_detail,
                id: target.id,
                type: type
            }).then(res => {
                console.log(res.data.attrs);
                this.attrData = res.data.attrData;
                this.attrFields = res.data.attrs;
            }).catch(res => {
                console.log(res);
            })
        },
        submit() {
            // 验证goodsForm，specForm
            let forms = ['goodsFormRef', 'descFormRef'];
            // 批量验证form表单
            let promises = forms.map(form => this.$refs[form].validate());

            Promise.all(promises)
                .then(() => {
                    this.doSubmit();
                })
                .catch(error => {});
        },
        doSubmit() {
            let data = {};
            data['product'] = this.goodsForm;
            data['desc'] = this.descForm;
            data['spec'] = this.specForm;
            data['attr'] = this.attrData;
            data['fields'] = this.attrFields;

            let id = this.$route.query.id;

            if (id) {
                data['product']['id'] = id;
                productUpdateApi(data).then(res => {
                    this.$message.success(res.msg);
                    // 跳转到列表页
                    this.$router.push('/product/goods/index');
                }).catch(res => {
                    console.log(res);
                })
            } else {
                productCreateApi(data).then(res => {
                    this.$message.success(res.msg);
                    // 跳转到列表页
                    this.$router.push('/product/goods/index');

                }).catch(res => {
                    console.log(res);
                })
            }
        }
    }
}
</script>

<style lang="less">
.app-container {
    position: relative;

    .submit-btn {
        position: fixed;
        top: 62px;
        right: 20px;
        z-index: 999;
    }

    .ml8 {
        margin-left: 8px;
    }

    .mr8 {
        margin-right: 8px;
    }

    .goods-rule-list {
        margin-top: 8px;
        margin-bottom: 8px;
    }

    .full-cascader {
        width: 100%;
    }
}
</style>
